<template>
  <!-- 组合式API ：通过调用一个个函数来定义相应的数据(实现相应的功能)-->

  <div v-if="isShow">{{ count }}</div>
  <button @click="handleClick">按钮</button>
</template>

<script lang="ts">
import { ref, reactive } from "vue";
export default {
  name: "App",
  setup() {
    type Arr = number[];

    const count = ref(0);

    const isShow = ref(true);

    const list = ref<Arr>([]);

    const handleClick = () => {
      count.value++;

      formData.name = "品牌";
    };

    interface FormData {
      id?: number;
      picUrl: string;
      name: string;
    }

    const formData = reactive<FormData>({
      picUrl: "",
      name: "",
    });

    // 将数据以对象的形式暴露出来，模板页面才能使用
    return {
      count,
      isShow,
      formData,
      handleClick,
    };
  },
};
</script>

<style></style>
